<template>
  <div class="profile-container">
    <div class="header">
      <trend-user :data="terendUserData"></trend-user>
    </div>

    <div class="block" style="margin-top: 30px">
      <!-- 累计收益趋势图 -->
      <trend-vue></trend-vue>
    </div>

    <div class="block" style="margin-top: 30px"></div>
  </div>
</template>

<script setup>
import trendVue from '../chart/components/trend'
import trendUser from './components/trend-user.vue'
import { ref, inject, onMounted, onUnmounted } from 'vue'

// 用户数据概况
const terendUserData = ref({})
terendUserData.value = {
  totalUserAmount: 111222,
  todayAddUserAmount: 46,
  activeUserAmount: 219,
  chargeAmount: 34860
}

const socket = inject('websocket')
console.log('==socket==', socket)

// 监听消息
// const unwatch = socket.on('message:notification', (msg) => {
//   console.log('收到通知:', msg)
// })

// 发送消息
// const sendMessage = () => {
//   socket.send({ type: 'chat', content: 'Hello!' })
// }

// 生命周期
onMounted(() => {
  // socket.send({ type: 'join', room: 'general' })
})

onUnmounted(() => {
  // if (unwatch) {
  //   unwatch()
  // }
})
</script>

<style lang="scss" scoped>
.profile-container {
  .header {
    padding-bottom: 40px;
  }
}
</style>
